<template>
  <div class="container">
    <global-header :user="currentUser"></global-header>
    <!-- <column-list :list="list"></column-list> -->
    <vaildate-form @from-submit="onFormSubmit">
      <div class="mb-3">
        <label class="form-label">邮箱地址</label>
        <validate-input :rules="emailRules" v-model="emailVal" placeholder="111"
        ref="inputRef"></validate-input>
        {{emailVal}}
      </div>
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
        v-model="emailRef.val" @blur="vaildateEmail" placeholder="111">
      <div id="emailHelp" v-if="emailRef.error" class="form-text">{{emailRef.message}}</div>
      </div>
      <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">密码</label>
        <input type="password" class="form-control" id="exampleInputPassword1">
      </div>
      <!-- 具名插槽的缩写 -->
      <template #submit>
        <span class="btn btn-danger">Submit</span>
      </template>
    </vaildate-form>
  </div>
</template>

<script lang="ts">
import 'bootstrap/dist/css/bootstrap.min.css';
import { defineComponent,reactive,ref} from 'vue';
// ColumnList,
import { ColumnProps } from './components/ColumnList.vue'
import GlobalHeader, { UserProps } from './components/GlobalHeader.vue'
import ValidateInput,{RulesProp} from './components/ValidateInput.vue'
import VaildateForm from './components/VaildateForm.vue'
const currentUser:UserProps = {
  islogin: true,
  name: 'liyang'
}
const testData: ColumnProps[] = [
  {
    id: 1,
    title: '测试专栏',
    description: 'dsafdsfdsf发送到发送到发送到干豆腐干豆腐',
    avatar: require('@/assets/test.jpeg')
  },
  {
    id: 2,
    title: '测试专栏',
    description: 'dsafdsfdsf发送到发送到发送到干豆腐干豆腐'
    // avatar: require('./assets/test.jpeg')
  },
  {
    id: 3,
    title: '测试专栏',
    description: 'dsafdsfdsf发送到发送到发送到干豆腐干豆腐',
    avatar: require('./assets/test.jpeg')
  },
  {
    id: 4,
    title: '测试专栏',
    description: 'dsafdsfdsf发送到发送到发送到干豆腐干豆腐',
    avatar: require('./assets/test.jpeg')
  }
];
const emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
export default defineComponent({
  name: 'App',
  components: {
    // ColumnList,
    GlobalHeader,
    ValidateInput,
    VaildateForm
  },
  setup () {
    const inputRef = ref<any>()
    const emailVal = ref('viking')
    const emailRules:RulesProp=[
      {type:'required',message:'电子邮箱地址不能为空'},
      {type:'email',message:'请输入正确的电子邮箱格式'}
    ]
    const emailRef = reactive({
      val:'',
      error:false,
      message:''
    })
    const vaildateEmail = ()=>{
      if(emailRef.val.trim() === ''){
        emailRef.error = true
        emailRef.message = "不能为空"
      }else if(!emailReg.test(emailRef.val)){
        emailRef.error = true
        emailRef.message = "邮箱格式不正确"
      }
    }
    const onFormSubmit = (result:boolean)=>{
      // 获取子组件实例
      console.log(inputRef.value)
      console.log('122',result)
    }
    return {
      list: testData,
      currentUser,
      emailRef,
      vaildateEmail,
      emailRules,
      emailVal,
      onFormSubmit,
      inputRef
    };
  }
});
</script>

<style>
</style>
